<template>
  <div class="two-page">
    <dv-border-box-1 class="tp-container">
      <dv-border-box-3 class="left-box">
        <Left-Chart-1 :stationId="stationId" />
        <Left-Chart-2 :stationId="stationId" />
      </dv-border-box-3>
      <!-- 右部分 -->
      <div class="right-box">
        <!-- 上部分 -->
        <div class="rb-top-container">
          <dv-border-box-3 class="rtc-left-container">
            <Center-Cmp :stationId="stationId" />
          </dv-border-box-3>
          <div class="rtc-right-container">
            <dv-border-box-3 class="rtc-chart-1">
              <Right-Chart-1 :stationId="stationId" />
            </dv-border-box-3>
            <dv-border-box-4 :reverse="true" class="rtc-chart-2 mmmm">
              <Right-Chart-2 style="height:52%;margin:2% 0;" :tre="1" :stationId="stationId" />
              <Right-Chart-3 style="height:45%" @toTwoPage="showStationData" />
            </dv-border-box-4>
          </div>
        </div>
        <!-- 下部分 -->
        <dv-border-box-4 class="rb-bottom-container">
          <Bottom-Charts :stationId="stationId" />
        </dv-border-box-4>
      </div>
    </dv-border-box-1>
  </div>
</template>

<script>
import LeftChart1 from "./LeftChart1";
import LeftChart2 from "./LeftChart2";
import CenterCmp from "./CenterCmp";
import RightChart1 from "./RightChart1";
import RightChart2 from "./RightChart2";
import RightChart3 from "./RightChart3";
import BottomCharts from "./BottomCharts";
export default {
  name: "TwoPage",
  components: {
    LeftChart1,
    LeftChart2,
    CenterCmp,
    RightChart1,
    RightChart2,
    RightChart3,
    BottomCharts,
  },
  data() {
    return {
      stationId: null
    }
  },
  methods: {
    showStationData(data){
      this.$parent.$parent.title = data.stattionName + '  详情'
      console.log('111',data.id)
      this.stationId = data.id
    }
  }
}
</script>

<style lang="less">
.two-page {
  width: 100%;
  height: calc(~"100% - 80px");
  color: #fff;

  .tp-container {
    height: 100%;

    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-box {
    width: 22%;
    padding: 10px;
    box-sizing: border-box;

    .border-box-content {
      flex-direction: column;
    }
  }

  .right-box {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;

    .rb-top-container {
      height: 52%;
      display: flex;

      .rtc-left-container {
        width: 65%;
      }

      .rtc-right-container {
        width: 35%;
        .rtc-chart-1 {
          height: 35%;
        }
        .mmmm .border-box-content {
          flex-direction: column;
        }
        .rtc-chart-2 {
          height: 65%;
        }
      }
    }

    .rb-bottom-container {
      height: 48%;
    }
  }
}
</style>